<template>
  <div class="guide">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">办事指南</span>
      <span class="header-wrap-right">
        <!-- <i class="iconseach iconfont icon-sousuo"></i> -->
      </span>
    </div>
    <!-- tabs -->
    <van-tabs
      v-if="typeData.length>1?typeData:null"
      v-model="activeName"
      animated
      :swipeable='true'
      :border='false'
      title-inactive-color="#57c5c6"
      title-active-color="#FD5585"
      background='#fff'
      line-width = '35%'
      line-height = '0.02rem'
      @change=onChange(activeName)
      >
      <van-tab
        v-model="list.id"
        v-for="(list,index) in typeData.length>1?typeData:null"
        :key="index"
        :title="list.name"
        :name="list.id"
      >
      <div style="min-height:calc(100vh - 1rem);">
        <!-- 指南列表 -->
        <div class="guide-list" v-for='(list,index) in listData' :key="index"  @click="toGuideDetail(list.id)">
          <div class="guide-listBox">
          <div class="guide-img">
            <img v-lazy="host+list.image" :src="host+list.image" alt="">
          </div>
          <div class="guide-content">
            <span class="guide-title">{{list.title}}</span>
            <span class="guide-time">{{list.createtime_text}}</span>
            <div class="guide-star">
              <!-- <span class="stars">
                <van-rate
                  style="width: auto;margin-right:.1rem;"
                  readonly
                  v-model="list.star"
                  :swipe-threshold = '3'
                  allow-half
                  void-icon="star"
                  void-color="#6b5da6"
                  color= '#ffa272'
                  @change= 'change(index)'
                  size= ".32rem"
                />
              </span> -->
              <span class="number">
                <span class="collection" @click.stop="starnumber(index,list.id)" v-if="list.favor"><img src="@/assets//images/collection-color.png" alt=""></span>
                <span class="collection" @click.stop="starnumber(index,list.id)" v-else><img src="@/assets//images/collection.png" alt=""></span>
              </span>
            </div>
          </div>
          </div>
        </div>
      </div>
    </van-tab>
    </van-tabs>
    <Tips v-if="show"/>
  </div>
</template>
<script>
import { Tab, Tabs, Rate } from 'vant';
import api from '../../api/api.js'
import Tips from '../../components/tips'
export default {
  data(){
    return{
      show: false,
      length: null,
      host:api.host,
      activeName: '',
      typeId: '',
      listData:[],
      typeData: [],
      itemData: [
        {
          name:'全部',
        }
      ],
    }
  },
  created(){
    this.businesstype()
    this.guide()
    this.menu()
  },
  methods:{
    menu(){
      window.scrollTo(0, 0)
    },
    toGuideDetail(id){
      this.$router.push({
        path: '/guideDetail',
        query: {
          id
        }
      })
    },
    // 指南列表
    guide(){
      this.$get(api.businesstext, {
        params: {
          type_id: this.typeId?this.typeId:undefined,
        }
      })
      .then((response) => {
        this.listData = response.data.data.list
        this.length = response.data.data.total
        if(this.length<=0){
          this.show = true
        }else{
          this.show = false
        }
      })
      .catch((error) => {
        console.log(error)
      });
    },
    // 指南分类
    businesstype(){
       this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.businesstype, {
      })
      .then((response) => {
        this.typeData = response.data.data.list
        this.typeData = this.typeData.concat(this.itemData).reverse()
        this.$toast.clear();
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error)
      });
    },
    goback(){
      this.$router.go(-1)
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
    // 收藏
    starnumber(index,id){
      this.listData[index].favor = !this.listData[index].favor
      this.$get(api.favor,{
        params: {
 　　     id: id,
          type: 'Guide'
        }
      })
      .then((response) => {
        if(response.data.code==1){
          if(this.listData[index].favor==true){
            this.$toast('收藏成功')
          }else{
            this.$toast('收藏取消')
          }
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    onChange(id){
      this.typeId = id
      this.guide()
    }
  },
  components:{
    [Tab.name]:Tab,
    [Tabs.name]:Tabs,
    [Rate.name]: Rate,
    Tips
  }
}
</script>
<style>
.guide .van-tabs__wrap{
  /* border-top: 1px solid #423B6F; */
  /* border-bottom: 1px solid #423B6F; */
  width: 100%;
  z-index: 1000;
  position: fixed;
  top: 1rem;
  left: 0;
}
.van-tab,.van-tab--active{
  font-weight: bold;
}
.guide .van-tabs--line{
  padding-top: 2rem;
}
.van-tabs__wrap--scrollable .van-tab{
  flex: 0 0 35%!important;
}
</style>
<style scoped>
.guide-list{
  background: #fff;
  margin: .25rem .3rem;
  border-radius: .2rem;
}
.guide-listBox{
  height: 2.4rem;
  display: flex;
  color: #000;
}
.guide-img{
  flex:1;
}
.guide-img img{
  width: 100%;
  height: 100%;
  border-radius: .2rem 0 0 .2rem;
}
.guide-content{
  text-indent: .3rem;
  text-align: left;
  flex:2;
  font-weight: bold;
}
.guide-title{
  font-size: .32rem;
  margin: .38rem 0 .25rem 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.guide-time{
  display: block;
  color: #FD5585;
  margin: .25rem 0;
}
.guide-star{
  margin: .3rem 0 0 .3rem;
  display: flex;
}
.stars{
  position: relative;
  text-indent: 0;
  flex: 3.5;
  color: #6b5da6;
  display: inline-block;
}
.star-number{
  position: absolute;
  right: 0;
  top: 0.005rem;
  width:1rem;
}
.number{
  text-align: right;
  margin-right: .3rem;
  flex: 1;
}
.number span img{
  width: .35rem;
  height: .35rem;
}
</style>
